{extends file="skulton.tpl"}{/extends}
{block name="monblock"}


<script src="scripts/js/Form.js"></script>
<script>

$(function() {
		
		$( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 400,
			width: 500,
			modal: true,
			buttons: {
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});

		$( ".modifier_nomade" )
			.button()
			.click(function() {
				$( "#dialog-form" ).dialog( "open" );
			});
			
					$( "#form_ajouter" ).dialog({
			autoOpen: false,
			height: 400,
			width: 500,
			modal: true,
			buttons: {
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});
			
			$( "#Ajouter" )
			.button()
			.click(function() {
				$( "#form_ajouter" ).dialog( "open" );
			});
	});

</script>

<script type="text/javascript" charset="utf-8">
	var asInitVals = new Array();
	 
	$(document).ready(function() {
	
	
	// Dialogue
	$('.modifier_nomade').click(function(){
			var a= $('.id',this);
			var id= $(a[0]).text();
			$("#id").val(id);
			a= $('.cin',this);
			var cin= $(a[0]).text();
			$("#cin").val(cin);
			
			a= $('.nom',this);
			var nom= $(a[0]).text();
			$("#nom").val(nom);
			
			a= $('.prenom',this);
			var prenom= $(a[0]).text();
			$("#prenom").val(prenom);
			
			a= $('.age',this);
			var age= $(a[0]).text();
			$("#age").val(age);
			
			a= $('.fonction',this);
			var fonction= $(a[0]).text();
			$("#fonction").val(fonction);
			
			
			
			
		    
			
		
		});
		
			
     // Fin dialogue

		  $(".yesno").click(function(){
				var a = $(this);
				$( "#dialog-confirm" ).dialog({
						resizable: false,
						modal: true,
						buttons: {
							"Oui": function() {
								
								document.location.href="nomade.php?id_sup="+a.attr('id');
							},
							"Non": function() {
								$( this ).dialog( "close" );
							}
						}
				});
			});
	
	
	
	
	
		var oTable = $('#idtable').dataTable( {
			"sPaginationType": "full_numbers",
			"oLanguage": {
				"sSearch": "Rechercher:"
			}
		} );
		 
		 
		//recherche spécifique à la colone
		$("tfoot input").keyup( function () {
			/* Filter on the column (the index) of this element */
			oTable.fnFilter( this.value, $("tfoot input").index(this) );
		} );
		 
		 
		 
		/*
		 * Support functions to provide a little bit of 'user friendlyness' to the textboxes in
		 * the footer
		 */
		$("tfoot input").each( function (i) {
			asInitVals[i] = this.value;
		} );
		 
		$("tfoot input").focus( function () {
			if ( this.className == "search_init" )
			{
				this.className = "";
				this.value = "";
			}
		} );
		 
		$("tfoot input").blur( function (i) {
			if ( this.value == "" )
			{
				this.className = "search_init";
				this.value = asInitVals[$("tfoot input").index(this)];
			}
		} );
		
		
			
			// FORMULAIRE UI
			
			
			
			
		
	} );
</script>



		
<div class="content-box"><!-- Start Content Box -->
	
	<div class="content-box-header">
		
		<h3>Liste des nomades en service</h3>
		
		<ul class="content-box-tabs">
			<a title="Edit"  class="button" id="Ajouter" style="float:right; margin-top:-10px" >Nouveau Nomade</a>
			<!-- Formulaire -->
			
							<div id="form_ajouter" title="Ajouter Nomade" class="reformed-form" > 

									<form method="post" name="Form" class="Form" id="test" action="nomade.php" >
									<fieldset id="fl1" class="fl1" style=" width: 100%">
									<legend>Ajouter</legend>
									<input type="hidden" name="ajout" id="id"  /><br/>

									<dl>
									<dt>
									<label for="cin" style="font-size: 15px;">CIN</label>
									</dt>
									<dd><input type="text"  class="cin required" name="cin"  value=""  /></dd>
									</dl>

									<dl>
									<dt>
									<label for="nom" style="font-size: 15px;">Nom</label>
									</dt>
									<dd><input type="text"  class="nom required  " name="nom" value="" /></dd>
									</dl>
									<dl>
									<dt>
									<label for="prenom" style="font-size: 15px;">Prénom</label>
									</dt>
									<dd><input type="text"   class="prenom required" name="prenom" /></dd></dd>
									</dl>
									<dl>
									<dt>
									<label for="age" style="font-size: 15px;">Age</label>
									</dt>
									<dd><input type="text"   class="age required number" name="age" /></dd></dd>
									</dl>
									<dl>
									<dt>
									<label for="fonction" style="font-size: 15px;">Fonction</label>
									</dt>
									<dd><input type="text"   class="fonction required" name="fonction" /></dd></dd>
									</dl>

									<div id="submit_buttons">
									<button type="reset" style="font-size: 10px;">Effacer</button>
									<button type="submit" style="font-size: 10px;" >Valider</button>
									</div>

									</fieldset>
									</form>

							</div> 
			
			
			
			
			<!-- End Formulaire -->
		</ul>
		
		<!-- Formulaire -->
		
		<div class="clear"></div>
		
	</div> <!-- End .content-box-:>header -->
	<div class="content-box-content">
				
			</div> <!-- End #messages -->

		<div class="tab-content default-tab" id="tab1"> <!-- This is the target div. id must match the href of this div's tab -->
		{if isset($message)}
			<div class="notification success png_bg">
				<a href="#" class="close"><img src="images/icons/cross_grey_small.png" title="Close this notification" alt="close"></a>
				<div>
					{$message}
				</div>
			</div>
		{/if}	
			
	<div style="display:none;" id="dialog-confirm" title="Demande de confirmation">
		<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Voulez-vous vraiment supprimer cet enregistrement ?</p>
	</div>

	
			<table id="idtable">
				
				<thead>
					<tr>
					   <th><input class="check-all" type="checkbox" /></th>
					    <th>ID</th>
					   <th>CIN</th>
					   <th>Nom</th>
					   <th>Prénom</th>
					   <th>Age</th>
					   <th>Fonction</th>
					   <th>Opération</th>
					</tr>
					
				</thead>
			
			 
				<tbody>
				  {foreach $return as $line}
					<tr>
						<td><input type="checkbox" /></td>
						<td>{$line['ID']}</td>
						<td>{$line['designation']}</td>
						<td>{$line['description']}</td>
						<td>{$line['piece']}</td>
						<td>{$line['dateFin']} </td>
						<td>
							<!-- Icons -->
							 <a href="#dialog-form" class="modifier_nomade" ><img src="images/icons/pencil.png" alt="Edit"  />
								<span class="id" style="display:none">{$line['ID']}</span>
								<span class="designation" style="display:none">{$line['designation']}</span>
								<span class="description" style="display:none">{$line['description']}</span>
								<span class="piece" style="display:none">{$line['piece']}</span>
								<span class="dateFin" style="display:none">{$line['dateFin']}</span>
	
							 </a>
							 <a href="#" title="Delete" class="yesno with-tip supp" id="{$line['ID']}"><img src="images/icons/cross.png" alt="Delete" /></a>
							 
							<!-- <a href="#" title="Edit Meta"><img src="images/icons/hammer_screwdriver.png" alt="Edit Meta" /></a> -->
						</td>
					</tr>
					
					{/foreach}
					
				</tbody>
				
				<tfoot>
					<tr>
						<th><input type="text" name="search_id" value="" class="search_int" style="display:none" /></th>
						<th><input type="text" name="search_id" value="" class="search_int" style="display:none" /></th>
						<th><input type="text" name="search_CIN" value="" class="search_int" /></th>
						<th><input type="text" name="search_nom" value="" class="search_int" /></th>
						<th><input type="text" name="search_prenom" value="" class="search_int"  /></th>
						<th><input type="text" name="search_age" value="" class="search_int" style="display:none" /></th>
						<th><input type="text" name="search_fonction" value="" class="search_int"  /></th>
						<th><input type="text" name="search_operations" value="" class="search_int" style="display:none"/></th>
						
						
					</tr>
				</tfoot>
				
			</table>
			
			<div id="dialog-form" title="Modifier Nomade" class="reformed-form"> <!-- Messages are shown when a link with these attributes are clicked: href="#messages" rel="modal"  -->
				
				<form method="post" name="Form" id="Form" action="nomade.php">
		<fieldset id="fl1" class="fl1" style=" width: 90%">
			<legend>Modifier</legend>
			<input type="hidden" name="id" value="1" id="id" />
					<dl>
					<dt>
					<label for="cin" style="font-size: 15px;">CIN</label>
					</dt>
					<dd><input type="text"  class="cin required" name="cin" id="cin" /></dd>
					</dl>

					<dl>
					<dt>
					<label for="nom" style="font-size: 15px;">Nom</label>
					</dt>
					<dd><input type="text" id="nom" class="nom required  " name="nom" /></dd>
					</dl>
					<dl>
					<dt>
					<label for="prenom" style="font-size: 15px;">Prénom</label>
					</dt>
					<dd><input type="text" id="prenom" class="prenom required" name="prenom" /></dd></dd>
					</dl>
					<dl>
					<dt>
					<label for="age" style="font-size: 15px;">Age</label>
					</dt>
					<dd><input type="text" id="age"  class="age required number" name="age" /></dd></dd>
					</dl>
					<dl>
					<dt>
					<label for="fonction" style="font-size: 15px;">Fonction</label>
					</dt>
					<dd><input type="text" id="fonction"  class="fonction required" name="fonction" /></dd></dd>
					</dl>
		  
			
			<div id="submit_buttons">
				<button type="reset" style="font-size: 10px;">Effacer</button>
				<button type="submit" style="font-size: 10px;">Valider</button>
			</div>
				
				</fieldset>
	</form>
				
				
				
				
			</div> 

			
			
		 
		
			
		</div> <!-- End #tab2 -->        
		
	</div> <!-- End .content-box-content -->

 {/block}